<script setup>
import {
  onLoad,
  onReachBottom,
  onShareAppMessage,
  onShareTimeline,
  onUnload
} from '@dcloudio/uni-app'
import { ref } from 'vue'
import { apiGetClassList, apiGetHistoryList } from '../../api/apis'

const noData = ref(false)
const queryParams = { pageNum: 1, pageSize: 12 }

let pageName = ''
const classList = ref([])

const getClassList = async () => {
  let res
  if (queryParams.classid) res = await apiGetClassList(queryParams)
  if (queryParams.type) res = await apiGetHistoryList(queryParams)

  // console.log(res.data)

  classList.value = [...classList.value, ...res.data]

  // in case useless requset on the bottom
  if (queryParams.pageSize > res.data.length) noData.value = true

  uni.setStorageSync('storageClassList', classList.value)
}

// get url param(classid)
onLoad(e => {
  // get classid and name(title)
  let { id = null, name = null, type = null } = e
  if (type) queryParams.type = type
  if (id) queryParams.classid = id
  // cannot direct visit
  // if (!id) gotoHome()
  // console.log(id, name)
  // queryParams.classid = id
  // set dynamic title
  pageName = name
  uni.setNavigationBarTitle({ title: name })
  // onLoad execute after setup
  getClassList()
})
onReachBottom(() => {
  if (noData.value) return
  queryParams.pageNum++
  getClassList()
})

//分享给好友
onShareAppMessage(e => {
  return {
    title: '咸虾米壁纸-' + pageName,
    path: '/pages/classlist/classlist?id=' + queryParams.classid + '&name=' + pageName
  }
})

//分享朋友圈
onShareTimeline(() => {
  return {
    title: '咸虾米壁纸-' + pageName,
    query: 'id=' + queryParams.classid + '&name=' + pageName
  }
})

onUnload(() => {
  uni.removeStorageSync('storageClassList')
})
</script>
<template>
  <view class="classlist">
    <!-- loading box -->
    <view class="loadingLayout" v-if="(!classList.length) && (!noData)">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="content">
      <navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList" :key="item._id">
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>
    <!-- bottom loading -->
    <view class="loadingLayout" v-if="(classList.length) || (noData)">
      <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
    </view>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>
<style lang="scss" scoped>
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 5rpx;

    .item {
      height: 440rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>